import React from 'react'
import {withRouter,} from 'react-router-dom'
import GoBackLayout from "../../layouts/GoBackLayout/GoBackLayout";
import {getFuliResultReq} from "../../apis/goApis";
import {log} from "../../utils/commonfunc";
import {Toast} from "antd-mobile";
import './fuli-result.css'
import FuliResultItem from "../game-room/components/Main/together/fuli-result-item/fuli-result-item";
import TeamAvatar from "../game-room/components/Header/Versus/TeamAvatar/TeamAvatar";
class FuliResult extends React.Component {

    constructor(props) {
        super(props)
        this.matchId = this.props.match.params.gameId
        this.resultTexts = [
            '主胜',
            '客胜',
            '平手',
        ]
        this.resultColors = [
            '#CA3A39',
            '#2D48C8',
            '#FFA500',
        ]
        this.state = {
            results: [],
            game: {
                homeName: '',
                homeLogo: '',
                awayName: '',
                awayLogo: '',
                homeScore: '',
                homeAway: '',
                result: -1,
            },
            p: 0,
            end: false,
        }
    }

    componentDidMount() {
        this.getResults()
    }

    getResults() {
        if (this.state.end === false) {
            const p = this.state.p
            getFuliResultReq({
                Namiid: parseInt(this.matchId),
                Offset: p * 10,
                Limit: 10,
            }).then(res => {
                log('fuli result', res)
                let r = res.data.ok
                let game = r[0]
                let end = r.length < 10
                let result
                let s1 = game.Zhufen
                let s2 = game.Kefen
                if (s1 === s2) {
                    result = 2
                } else if (s1 > s2) {
                    result = 0
                } else if (s1 < s2) {
                    result = 1
                }
                this.setState({
                    results: [...this.state.results, ...r,],
                    game: {
                        homeName: game.Zhuname,
                        awayName: game.Kename,
                        homeLogo: game.Zhulogo,
                        awayLogo: game.Kelogo,
                        homeScore: s1,
                        awayScore: s2,
                        result,
                    },
                    end,
                })
            })
        } else {
            Toast.info('end')
        }

    }

    render() {
        const rs = this.state.results
        const g = this.state.game
        const tx = this.resultTexts
        const cs = this.resultColors
        log('g', g)

        return <GoBackLayout
            mainTitle='奖励列表'
            history={this.props.history}
        >
            <div className='bg-white pd-12 flex-space-around-align-center'>
                <div>
                    <TeamAvatar atTop={true} iconUrl={g.homeLogo}/>
                    <span>
                        {g.homeName}
                    </span>
                </div>
                <div className='text-align-center'>
                    <p className='mg-b-8px gray-text'>完</p>
                    <p
                        className='mg-b-12px'
                        style={{
                            fontSize: '22px',
                            fontWeight: '600',
                            color: '#333333',
                            lineHeight: '22px',
                            letterSpacing: '2px',
                        }}
                    >{g.homeScore}:{g.awayScore}</p>
                    <p
                        style={{
                            background: cs[g.result],
                            padding: '6px 12px',
                            color: '#fff',
                            fontSize: '12px',
                        }}
                    >{tx[g.result]}</p>
                </div>
                <div>
                    <TeamAvatar atTop={true} iconUrl={g.awayLogo}/>
                    <span>
                        {g.awayName}
                    </span>

                </div>

            </div>

            <div className='fuli-results-container' >
                <div style={{padding: '0 12px 12px 12px',}}>
                    <span className='gray-text' style={{width: 46, textAlign: 'center', display: 'inline-block', marginRight: '10%',}}>用户</span>
                    <span className='gray-text'>碎片类型</span>
                </div>
                {rs.map((user, index) => <FuliResultItem user={user} key={index} style={{background: '#fff',}}/>)}
            </div>
        </GoBackLayout>
    }
}

export default withRouter(FuliResult)